<template>
    <div  class="user-header">
<el-button type="primary"  @click="handleAdd">新增</el-button>
<el-form :inline="true"  :model="formInline" >
 <el-form-item label="请输入" >
        <el-input placeholder="请输入用户名"  v-model="formInline.keyWord"></el-input>
        </el-form-item>
           <el-form-item >
    <el-button type="primary"  @click="handleSearch">搜索</el-button>
        </el-form-item>
</el-form>
    </div>
<div  class="table">
      <el-table :data="tableData" style="width: 100%">
    <el-table-column 
    v-for ="item in tableLabel"
    :key="item.prop"
    :prop="item.prop"
    :width="item.width ? item.width : 125"
    :label="item.label"
    />
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template #="scope">
        <el-button  type="primary" size="small" @click="handleEdit(scope.row)">
         编辑
        </el-button>
        <el-button  type="danger" size="small"  @click="handlerDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

<el-pagination
class="pager"
  background
  layout="prev, pager, next"
  :total="config.total"
  size="small"
  @current-change="handleCurrentChange"
 
  ></el-pagination>

</div>
<el-dialog
    v-model="dialogVisible"
    :title="action == 'add' ? '新增用户' : '编辑用户'"
    width="35%"
    :before-close="handleClose"
  >
       <!--需要注意的是设置了:inline="true"，
		会对el-select的样式造成影响，我们通过给他设置一个class=select-clearn
		在css进行处理-->
    <el-form :inline="true"  :model="formUser" :rules="rules" ref="userForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formUser.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="formUser.age" placeholder="请输入年龄" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item class="select-clearn" label="性别" prop="sex">
            <el-select  v-model="formUser.sex" placeholder="请选择">
              <el-option label="男" value="1" />
              <el-option label="女" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birth">
            <el-date-picker
              v-model="formUser.birth"
              type="date"
              placeholder="请输入"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item
          label="地址"
          prop="addr"
        >
          <el-input v-model="formUser.addr" placeholder="请输入地址" />
        </el-form-item>
      </el-row>
      <el-row style="justify-content: flex-end">
        <el-form-item>
          <el-button type="primary" @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </el-dialog>

</template>

<script setup >
import { ref,getCurrentInstance,onMounted,reactive, nextTick } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'

const handleClick = () => {
  console.log('click')
}
const tableData = ref([])

// 分页
const handleCurrentChange = (page) => {
    config.page=page
    getUserData()
  
}

// 删除
const handlerDelete =  (row) => {
 ElMessageBox.confirm("你确定要删除么").then(async ()=>{
   await proxy.$api.deleteUser({id:row.id})
   ElMessage({
    showClose:true,
    type:"success",
    message:"删除成功"
   })
   getUserData()
 })
}

const { proxy } = getCurrentInstance(); // 获取当前实例的代理对象
const formInline=reactive({
    keyWord:'',
})

const getUserData=  async()=>{
  let data=await proxy.$api.getUserData(config)
 tableData.value=data.list.map(item=>({
    // ...item,剩余参数展开
    ...item,
    sex:item.sex==1?'男':'女',
 }))
 config.total=data.count
}

const tableLabel=reactive([
    {
        label:'姓名',
        prop:'name'
    },
    {
        label:'年龄',
        prop:'age' 
    },
    {
        label:'性别',
        prop:'sex' 
    },
    {
    label:'出生日期',
     prop:'birth',
     width:200
    },
    {
        label:'地址',
        prop:'addr' ,
        width:400
    }
])
const config=reactive({
name:'', 
total:0,
page:1,
})
// 搜索
const handleSearch=()=>{
    config.name=formInline.keyWord
   getUserData()
}
onMounted(()=>{
getUserData()
})


// 新增用户
const action=ref('add') // 新增用户
const dialogVisible=ref(false) // 控制弹窗
const formUser=reactive({ })// 新增用户表单数据
// 校验规则
const rules = reactive({
  name: [{ required: true, message: "姓名是必填项", trigger: "blur" }],
  age: [
    { required: true, message: "年龄是必填项", trigger: "blur" },
    { type: "number", message: "年龄必须是数字" },
  ],
  sex: [{ required: true, message: "性别是必选项", trigger: "change" }],
  birth: [{ required: true, message: "出生日期是必选项" }],
  addr:[{ required: true, message: '地址是必填项' }]
})
// 关闭弹窗
const handleClose = () => {
// 获取表单重置表单
dialogVisible.value=false

}
const handleCancel = () => {
dialogVisible.value=false
}
const handleAdd=()=>{
dialogVisible.value=true
action.value='add'
}

const timeFormat=(time)=>{
var time=new Date(time)
var y=time.getFullYear()
var m=time.getMonth()+1
var d=time.getDate()
function addZero(num){
  return num<10?'0'+num:num
}
return y+'-'+addZero(m)+'-'+addZero(d)
}
// 提交表单
const onSubmit =() => {
  // 表单验证
proxy.$refs['userForm'].validate( async(valid) => {
   if (valid) {
    let res=null
    formUser.birth=/^\d{4}-\d{2}-\d{2}$/.test(formUser.birth)?formUser.birth:timeFormat(formUser.birth)
    if(action.value=='add'){
     res= await proxy.$api.addUser(formUser)
    }else{
      res= await proxy.$api.editUser(formUser)
    }
    if(res){
      dialogVisible.value=false
      proxy.$refs['userForm'].resetFields()
      getUserData()
    }
    else{
      ElMessage({
        showClose:true,
        type:"error",
        message:"请输入正确内容"
      })
    }
   }
  }) 
}
// 编辑用户
const handleEdit=(val)=>{
  dialogVisible.value=true
  action.value='edit'
  // 浅拷贝
  
  nextTick(()=>{
    Object.assign(formUser,{...val,sex:''+val.sex})
  })
}
</script>

<style scoped lang="less">
.user-header{
    display: flex;
    justify-content: space-between;


}
.table{
   position:relative;
   height:520px;
    .pager{
        position: absolute;
        bottom: 30px;
        right: 10px;  
    }
    .el-table{
        height: 500px;
        width: 100%;
     }
}
.select-clearn{
display: flex;
}

</style>